<template>
    <div class="MoreBtnContainer">
        <div :class="{ hidden: showMore }" class="default">
            <slot name="default"></slot>
        </div>
        <template v-if="showMore">
            <template v-for="(item, index) in slotList" :key="index">
                    <component :is="item" v-if="index === 0"></component>
            </template>

            <a-dropdown>
                <a @click.prevent><a-divider type="vertical" />更多 <DownOutlined /></a>
                <template #overlay>
                    <a-menu>
                        <template v-for="(item, index) in slotList" :key="index">
                            <a-menu-item v-if="show(item,index)">
                                <component :is="item"></component>
                            </a-menu-item>
                        </template>
                    </a-menu>
                </template>
            </a-dropdown>
        </template>
    </div>
</template>


<script setup   name="moreBtnContainer">
import { DownOutlined } from "@ant-design/icons-vue"
import { useSlots, computed, onUpdated } from 'vue'
import  useUserStore  from '../../store/modules/user'
const showMore = computed(() => {
  return Array.isArray(slotList.value) && slotList.value.length > 2
})

const show = (item, index) => {
  if(!item.props.modulePerm && index !== 0) {
    return true
  }
  let modulePerm = item.props.modulePerm
  const permissionList = useUserStore().permissionList
  const permissions = permissionList.map(item => item.action)
  if(modulePerm instanceof Array && modulePerm.length > 0){
    //判断两个数组是否有相同项
    return modulePerm.some(permission => {
      return permissions.includes(permission)
    })

  }
}

let slotList = computed(() => useSlots().default?.().filter((v) => !['Symbol(v-cmt)', 'Symbol(v-txt)'].includes(String(v.type))))

onUpdated(() => {
    slotList = computed(() =>  useSlots().default?.().filter((v) => !['Symbol(v-cmt)', 'Symbol(v-txt)'].includes(String(v.type))))
})

</script>

<style lang="less" scoped>
.MoreBtnContainer {
    .default {
        display: flex;
        justify-content: space-evenly;
        flex: 1
    }
    .hidden {
        position: absolute;
        z-index: -999;
        left: -3000px;
        top: -3000px;
    }
}</style>
